<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery可折叠图标菜单</title>
    <link href="css/zzsc.css" rel="stylesheet">
    <script type="text/javascript" src="js/jquery-1.10.1.min.js"></script>
    <script type="text/javascript" src="js/easing.js"></script>
    <script type="text/javascript">$(document).ready(function(){$().navy({speed: 400,align: "right"});});
    </script>
    
</head>
<body>
<div class="content">
    <div class="ahfkah" style="display: none;">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in metus
        at mauris cursus luctus ac non tellus. Nam hendrerit est at fringilla
        ultricies. Vivamus malesuada erat lectus, quis sollicitudin est egestas
        eget. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices
        posuere cubilia Curae;Morbi nisl risus, faucibus id nunc sollicitudin,
        faucibus pretium erat. Etiam odio erat, faucibus id eleifend ut,
        dignissim sit amet est. Nunc quam leo, laoreet non metus eu, tincidunt
        volutpat leo. In dignissim magna vehicula, placerat purus a,
        sollicitudin urna. Vestibulum dignissim lacus urna, ac tempor justo
        fermentum in. 
    </div>
    <div class="navy red">
        <div class="ahfkah" style="display: none;">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in
            metus at mauris cursus luctus ac non tellus. Nam hendrerit est at
            fringilla ultricies. Vivamus malesuada erat lectus, quis
            sollicitudin est egestas eget. Vestibulum ante ipsum primis in
            faucibus orci luctus et ultrices posuere cubilia Curae;Morbi nisl
            risus, faucibus id nunc sollicitudin, faucibus pretium erat. Etiam
            odio erat, faucibus id eleifend ut, dignissim sit amet est. Nunc
            quam leo, laoreet non metus eu, tincidunt volutpat leo. In dignissim
            magna vehicula, placerat purus a, sollicitudin urna. Vestibulum
            dignissim lacus urna, ac tempor justo fermentum in. 
        </div>
        <a class="brand" href="#">Navy</a>
        <div class="ahfkah" style="display: none;">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in
        metus at mauris cursus luctus ac non tellus. Nam hendrerit est at
        fringilla ultricies. Vivamus malesuada erat lectus, quis
        sollicitudin est egestas eget. Vestibulum ante ipsum primis in
        faucibus orci luctus et ultrices posuere cubilia Curae;Morbi nisl
        risus, faucibus id nunc sollicitudin, faucibus pretium erat. Etiam
        odio erat, faucibus id eleifend ut, dignissim sit amet est. Nunc
        quam leo, laoreet non metus eu, tincidunt volutpat leo. In dignissim
        magna vehicula, placerat purus a, sollicitudin urna. Vestibulum
        dignissim lacus urna, ac tempor justo fermentum in. 
        </div>
        <ul class="menu">
            <div class="ahfkah" style="display: none;">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec
                in metus at mauris cursus luctus ac non tellus. Nam hendrerit
                est at fringilla ultricies. Vivamus malesuada erat lectus, quis
                sollicitudin est egestas eget. Vestibulum ante ipsum primis in
                faucibus orci luctus et ultrices posuere cubilia Curae;Morbi
                nisl risus, faucibus id nunc sollicitudin, faucibus pretium
                erat. Etiam odio erat, faucibus id eleifend ut, dignissim sit
                amet est. Nunc quam leo, laoreet non metus eu, tincidunt
                volutpat leo. In dignissim magna vehicula, placerat purus a,
                sollicitudin urna. Vestibulum dignissim lacus urna, ac tempor
                justo fermentum in. 
            </div>
            <li class="active">
                <a href="#">
                    <i class="icon-home"></i>home</a></li>
            <div class="ahfkah" style="display: none;">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec
            in metus at mauris cursus luctus ac non tellus. Nam hendrerit
            est at fringilla ultricies. Vivamus malesuada erat lectus, quis
            sollicitudin est egestas eget. Vestibulum ante ipsum primis in
            faucibus orci luctus et ultrices posuere cubilia Curae;Morbi
            nisl risus, faucibus id nunc sollicitudin, faucibus pretium
            erat. Etiam odio erat, faucibus id eleifend ut, dignissim sit
            amet est. Nunc quam leo, laoreet non metus eu, tincidunt
            volutpat leo. In dignissim magna vehicula, placerat purus a,
            sollicitudin urna. Vestibulum dignissim lacus urna, ac tempor
            justo fermentum in. </div>
            </li>
            <li><a href="#"><i class="icon-rocket"></i>services</a><div class="ahfkah" style="display: none;">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec
                in metus at mauris cursus luctus ac non tellus. Nam hendrerit
                est at fringilla ultricies. Vivamus malesuada erat lectus, quis
                sollicitudin est egestas eget. Vestibulum ante ipsum primis in
                faucibus orci luctus et ultrices posuere cubilia Curae;Morbi
                nisl risus, faucibus id nunc sollicitudin, faucibus pretium
                erat. Etiam odio erat, faucibus id eleifend ut, dignissim sit
                amet est. Nunc quam leo, laoreet non metus eu, tincidunt
                volutpat leo. In dignissim magna vehicula, placerat purus a,
                sollicitudin urna. Vestibulum dignissim lacus urna, ac tempor
                justo fermentum in. </div>
                <ul>
                    <div class="ahfkah" style="display: none;">
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                        Donec in metus at mauris cursus luctus ac non tellus. Nam
                        hendrerit est at fringilla ultricies. Vivamus malesuada erat
                        lectus, quis sollicitudin est egestas eget. Vestibulum ante
                        ipsum primis in faucibus orci luctus et ultrices posuere
                        cubilia Curae;Morbi nisl risus, faucibus id nunc
                        sollicitudin, faucibus pretium erat. Etiam odio erat,
                        faucibus id eleifend ut, dignissim sit amet est. Nunc quam
                        leo, laoreet non metus eu, tincidunt volutpat leo. In
                        dignissim magna vehicula, placerat purus a, sollicitudin
                        urna. Vestibulum dignissim lacus urna, ac tempor justo
                        fermentum in. </div>
                    <li><a href="#">dropdown item</a></li><div class="ahfkah" style="display: none;">
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                    Donec in metus at mauris cursus luctus ac non tellus. Nam
                    hendrerit est at fringilla ultricies. Vivamus malesuada erat
                    lectus, quis sollicitudin est egestas eget. Vestibulum ante
                    ipsum primis in faucibus orci luctus et ultrices posuere
                    cubilia Curae;Morbi nisl risus, faucibus id nunc
                    sollicitudin, faucibus pretium erat. Etiam odio erat,
                    faucibus id eleifend ut, dignissim sit amet est. Nunc quam
                    leo, laoreet non metus eu, tincidunt volutpat leo. In
                    dignissim magna vehicula, placerat purus a, sollicitudin
                    urna. Vestibulum dignissim lacus urna, ac tempor justo
                    fermentum in. </div>
            </li>
            <li><a href="#">dropdown item</a></li><div class="ahfkah" style="display: none;">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit.
            Donec in metus at mauris cursus luctus ac non tellus. Nam
            hendrerit est at fringilla ultricies. Vivamus malesuada erat
            lectus, quis sollicitudin est egestas eget. Vestibulum ante
            ipsum primis in faucibus orci luctus et ultrices posuere
            cubilia Curae;Morbi nisl risus, faucibus id nunc
            sollicitudin, faucibus pretium erat. Etiam odio erat,
            faucibus id eleifend ut, dignissim sit amet est. Nunc quam
            leo, laoreet non metus eu, tincidunt volutpat leo. In
            dignissim magna vehicula, placerat purus a, sollicitudin
            urna. Vestibulum dignissim lacus urna, ac tempor justo
            fermentum in. </div>
            </li>
            <li><a href="#">dropdown item</a><div class="ahfkah" style="display: none;">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                Donec in metus at mauris cursus luctus ac non tellus. Nam
                hendrerit est at fringilla ultricies. Vivamus malesuada erat
                lectus, quis sollicitudin est egestas eget. Vestibulum ante
                ipsum primis in faucibus orci luctus et ultrices posuere
                cubilia Curae;Morbi nisl risus, faucibus id nunc
                sollicitudin, faucibus pretium erat. Etiam odio erat,
                faucibus id eleifend ut, dignissim sit amet est. Nunc quam
                leo, laoreet non metus eu, tincidunt volutpat leo. In
                dignissim magna vehicula, placerat purus a, sollicitudin
                urna. Vestibulum dignissim lacus urna, ac tempor justo
                fermentum in. </div>
                <ul>
                    <div class="ahfkah" style="display: none;">
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                        Donec in metus at mauris cursus luctus ac non tellus.
                        Nam hendrerit est at fringilla ultricies. Vivamus
                        malesuada erat lectus, quis sollicitudin est egestas
                        eget. Vestibulum ante ipsum primis in faucibus orci
                        luctus et ultrices posuere cubilia Curae;Morbi nisl
                        risus, faucibus id nunc sollicitudin, faucibus pretium
                        erat. Etiam odio erat, faucibus id eleifend ut,
                        dignissim sit amet est. Nunc quam leo, laoreet non metus
                        eu, tincidunt volutpat leo. In dignissim magna vehicula,
                        placerat purus a, sollicitudin urna. Vestibulum
                        dignissim lacus urna, ac tempor justo fermentum in. </div>
                    <li>
                        <div class="ahfkah" style="display: none;">
                            Lorem ipsum dolor sit amet</div>
                        <a href="#">dropdown item</a><div class="ahfkah" style="display: none;">
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                        Donec in metus at mauris cursus luctus ac non tellus.
                        Nam hendrerit est at fringilla ultricies. Vivamus
                        malesuada erat lectus, quis sollicitudin est egestas
                        eget. Vestibulum ante ipsum primis in faucibus orci
                        luctus et ultrices posuere cubilia Curae;Morbi nisl
                        risus, faucibus id nunc sollicitudin, faucibus pretium
                        erat. Etiam odio erat, faucibus id eleifend ut,
                        dignissim sit amet est. Nunc quam leo, laoreet non metus
                        eu, tincidunt volutpat leo. In dignissim magna vehicula,
                        placerat purus a, sollicitudin urna. Vestibulum
                        dignissim lacus urna, ac tempor justo fermentum in. </div>
                    </li>
                    <li>
                        <div class="ahfkah" style="display: none;">
                            Lorem ipsum dolor sit amet</div>
                        <a href="#">dropdown item</a><div class="ahfkah" style="display: none;">
                        Lorem ipsum dolor sit amet</div>
                    </li>
                    <li>
                        <div class="ahfkah" style="display: none;">
                            Lorem ipsum dolor sit amet</div>
                        <a href="#">dropdown item</a><div class="ahfkah" style="display: none;">
                        Lorem ipsum dolor sit amet</div>
                    </li>
                    <li>
                        <div class="ahfkah" style="display: none;">
                            Lorem ipsum dolor sit amet</div>
                        <a href="#">dropdown item</a><div class="ahfkah" style="display: none;">
                        Lorem ipsum dolor sit amet</div>
                    </li>
                    <li>
                        <div class="ahfkah" style="display: none;">
                            Lorem ipsum dolor sit amet</div>
                        <a href="#">dropdown item</a><div class="ahfkah" style="display: none;">
                        Lorem ipsum dolor sit amet</div>
                    </li>
                    <li>
                        <div class="ahfkah" style="display: none;">
                            Lorem ipsum dolor sit amet</div>
                        <a href="#">dropdown item</a><div class="ahfkah" style="display: none;">
                        Lorem ipsum dolor sit amet</div>
                    </li>
                </ul>
                <div class="ahfkah" style="display: none;">
                    Lorem ipsum dolor sit amet</div>
            </li>
            <div class="ahfkah" style="display: none;">
                Lorem ipsum dolor sit amet</div>
            <div class="ahfkah" style="display: none;">
                Lorem ipsum dolor sit amet</div>
            </li>
            <li>
                <div class="ahfkah" style="display: none;">
                    Lorem ipsum dolor sit amet</div>
                <a href="#">dropdown item</a><div class="ahfkah" style="display: none;">
                Lorem ipsum dolor sit amet</div>
            </li>
            <li>
                <div class="ahfkah" style="display: none;">
                    Lorem ipsum dolor sit amet</div>
                <a href="#">dropdown item</a><div class="ahfkah" style="display: none;">
                Lorem ipsum dolor sit amet</div>
            </li>
            <li>
                <div class="ahfkah" style="display: none;">
                    Lorem ipsum dolor sit amet</div>
                <a href="#">dropdown item</a><div class="ahfkah" style="display: none;">
                Lorem ipsum dolor sit amet</div>
            </li>
        </ul>
        <div class="ahfkah" style="display: none;">
            Lorem ipsum dolor sit amet</div>
        </li>
        <div class="ahfkah" style="display: none;">
            Lorem ipsum dolor sit amet</div>
        </li>
        <li>
            <a href="#"><i class="icon-magic"></i>portfolio</a><div class="ahfkah" style="display: none;">
            Lorem ipsum dolor sit amet</div>
            <ul>
                <div class="ahfkah" style="display: none;">
                    Lorem ipsum dolor sit amet</div>
                <li>
                    <div class="ahfkah" style="display: none;">
                        Lorem ipsum dolor sit amet</div>
                    <a href="#">dropdown item</a><div class="ahfkah" style="display: none;">
                    Lorem ipsum dolor sit amet</div>
                </li>
                <li>
                    <div class="ahfkah" style="display: none;">
                        Lorem ipsum dolor sit amet</div>
                    <a href="#">dropdown item</a></li>
                <li>
                    <div class="ahfkah" style="display: none;">
                        Lorem ipsum dolor sit amet</div>
                    <a href="#">dropdown item</a></li>
                <li>
                    <div class="ahfkah" style="display: none;">
                        Lorem ipsum dolor sit amet</div>
                    <a href="#">dropdown item</a></li>
                <li>
                    <div class="ahfkah" style="display: none;">
                        Lorem ipsum dolor sit amet</div>
                    <a href="#">dropdown item</a></li>
                <div class="ahfkah" style="display: none;">
                Lorem ipsum dolor sit amet
                </div>
        </li>
        
        </ul>
        <div class="ahfkah" style="display: none;">
            Lorem ipsum dolor sit amet</div>
        <div class="ahfkah" style="display: none;">
            Lorem ipsum dolor sit amet</div>
        </li>
        <div class="ahfkah" style="display: none;">
            Lorem ipsum dolor sit amet</div>
        </li>
        <li>
            <div class="ahfkah" style="display: none;">
                Lorem ipsum dolor sit amet</div>
            <a href="#"><i class="icon-beaker"></i>blog</a></li><div class="ahfkah" style="display: none;">
        Lorem ipsum dolor sit amet</div>
        </li>
        <li>
            <div class="ahfkah" style="display: none;">
                Lorem ipsum dolor sit amet</div>
            <a href="#"><i class="icon-bullhorn"></i>contact</a></li>
        </ul>
        <div class="ahfkah" style="display: none;">
            Lorem ipsum dolor sit amet</div>
    </div>
    <div class="ahfkah" style="display: none;">
        Lorem ipsum dolor sit amet</div>
    <div class="ahfkah" style="display: none;">
        Lorem ipsum dolor sit amet</div>
</div>
<div class="ahfkah" style="display: none;">
    Lorem ipsum dolor sit amet</div>
<div class="ahfkah" style="display: none;">
    Lorem ipsum dolor sit amet</div>
<div style="text-align:center;clear:both"><br><br><br><br><br><br><br><br><br><br>
    <p>适用浏览器：FireFox、Chrome、Safari、Opera、傲游、搜狗. 不支持IE8、360、世界之窗。</p>
    <p>来源：<a href="http://sc.chinaz.com/" target="_blank">站长素材</a></p>
</div>
</body>
</html>